<link rel="stylesheet" href="/CSS/editEncyclopedia.css">
<style>
    .table .name {
        background-color: #fff;
        width: 120px;
    }

    .layui-laydate .layui-this {
        background-color: #1E9FFF !important;
        color: #fff !important;
    }

    .tableWidth {
        width: 450px;
    }

    .container {
        width: 1100px;
    }

    .bottomform input {
        margin-left: 10px;
        width: 285px;
    }

    .textbox {
        text-align: left;
    }
</style>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
        <legend><i class="fa fa-file-text-o"></i> 军 事 影 音 </legend>
        <span style="color:rgb(172, 168, 168);"> 注意：表格中带<span style="color: red;">*</span>为必填项</span>
    </fieldset>
    <div class="container">
        <form class="layui-form">
            <!-- 表单 -->
            <ul class="table flex-c-j">
                <li class="top flex">
                    <!-- 左侧输入框 -->
                    <ul class="form flex-column-s">
                        <!-- 下 -->
                        <li class="bottomform">
                            <!-- 左边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">标题<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="title" autocomplete="off" class="layui-input"
                                            style="height:34px;width:300px;margin-left: 10px;" lay-verify="required"
                                            lay-reqText="标题不能为空！" placeholder="请输入标题">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">发表时间<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="publishDate" placeholder="请选择发表时间" autocomplete="off"
                                            class="layui-input date" style="height:36px;width:300px;margin-left: 10px;"
                                            lay-verify="required" lay-reqText="发表时间不能为空！">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">视频来源：</span>
                                    <div class="textbox">
                                        <input type="text" name="literatureSources" autocomplete="off" class="layui-input"
                                            style="height:34px;width:300px;margin-left: 10px;" placeholder="请输入视频来源">
                                    </div>
                                </li>
                            </ul>
                            <!-- 右边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">分类<span style="color: red;">*</span>：</span>
                                    <div class="textbox textleft" style="width: 300px;">
                                        <select name="classification" id="classification" lay-verify="required"
                                            lay-reqText="分类不能为空！" style="height: 34px;">
                                            <option value="">请选择</option>
                                            <option value="JSGN">军事概念</option>
                                            <option value="JSJS">军事技术</option>
                                            <option value="JSYX">军事演习</option>
                                        </select>
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">录入人：</span>
                                    <div class="textbox" style="text-align:left ;">
                                        <input name="recorderName" id="chooseUser" class="borderNone" type="text"
                                            disabled style="width: 190px;margin-left: 10px;">
                                        <button onclick="editRecorder();" type="button"
                                            style="width: 60px;height: 34px;line-height: 24px;margin-left: 5px;border: 1px solid  #a4a2a2;font-size: 14px;margin-top: 10px;background-color: #fff;"><i
                                                class="layui-icon layui-icon-edit"></i>修改</a></button>
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">关键词：</span>
                                    <div class="textbox">
                                        <input name="keyWord" class="borderNone" type="text" style="width:260px;"
                                            placeholder="请输入关键词,多个关键词以英文分号;分隔">
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <span class="name">视频<span style="color: red;">*</span>：</span>
                            <div class="textbox" style="margin-top: 10px;">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="uploadVideo"
                                    style="margin-left: 10px;">上传视频</button>
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="deleteVideo"
                                    style="margin-left: 10px;">删除视频</button>
                                <span id="digitFileNameSpan" title=""
                                    style="display: inline-block;margin-left: 50px;"></span>
                                <video src="" controls="controls" id="videoplay" name="videoplay" lay-verify="required"
                                    lay-reqText="视频不能为空！" 
                                    hidden></video>
                                <br>
                                <span style="color:rgb(172, 168, 168);font-size: smaller;margin-left: 10px;">
                                    (支持视频格式：MP4,webm,ogg)
                                </span>
                            </div>
                        </li>
                        <li class="one" style="display: flex;justify-content: center;height:115px">
                            <span class="name big" style="height:115px">简介：</span>
                            <div class="textbox" style="height:125px; border-bottom: none;">
                                <textarea name="summary" id="" class="borderNone textcontent"
                                    style="width: 720px;margin-left: 10px;height:70px" placeholder="请输入内容"></textarea>
                            </div>
                        </li>
                    </ul>
                    <!-- 封面 -->
                    <div class="poster flex-c-a" style="height: 310px;border-bottom: none;">
                        <span style="color:rgb(172, 168, 168);width: 190px;margin-top: 2px;">
                            注：支持常见格式：jpg(jpeg), png;点击可放大/缩小封面</span>
                        <img class="layui-upload-img" style="height: 200px;" id="ongImg">
                        <div id="outerdiv"
                            style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);width:100%;height:100%;display:none;border-bottom: none;">
                            <div id="innerdiv" style="position:absolute;border-bottom: none;">
                                <img id="bigimg" style="border:1px solid #fff;">
                            </div>
                        </div>
                        <button type="button" id="uploadCover" class="layui-icon">上传封面</button>
                    </div>
                </li>
            </ul>
            <button class="layui-btn" lay-submit="" lay-filter="save"
                style="margin-top:20px;background-color: #FFB800;font-size: 14px;color: #ffffff;border-radius: 5px;margin-left: 900px;margin-bottom: 20px;">立即提交</button>
            <button class="layui-btn" onclick="fn_Close();" type="button"
                style="margin-top:20px;background-color: #cccccc;font-size: 14px;color: #ffffff;border-radius: 5px;margin-bottom: 20px;">取消提交</button>
            <div hidden>
                <input type="text" name="organ">
                <input type="text" name="sysID">
                <input type="text" name="digitFileName">
                <input type="text" name="recorder" id="chooseUserNo">
                <input type="text" name="cover">
                <input type="text" name="newCover" id="newCover">
                <input type="text" name="newDigitFileName">
            </div>
        </form>
    </div>
    <script>
        $(function () {
            //自动填入录入人
            if (parent.opreatType == "add") {
                if (shared.getCookie('userinfo')) {
                    var userInfo = JSON.parse(shared.getCookie('userinfo'));
                    $("input[name='recorder']").val(userInfo.id)
                    $("input[name='recorderName']").val(userInfo.name)
                }
            }
            // 编辑
            if (parent.opreatType == "edit") {
                var parent_json = parent.editData;
                $("input[name='sysID']").val(parent_json.sysID)
                $("input[name='recorder']").val(parent_json.recorder)
                $("input[name='recorderName']").val(parent_json.recorderName)
                $("input[name='title']").val(parent_json.title)
                $("input[name='keyWord']").val(parent_json.keyWord)
                $("input[name='literatureSources']").val(parent_json.literatureSources)
                $("input[name='organ']").val(parent_json.organ)
                $("input[name='publishDate']").val(parent_json.publishDate)
                $("input[name='digitFileName']").val(parent_json.digitFileName)
                $("textarea[name='summary']").val(parent_json.summary)
                $("textarea[name='text']").val(parent_json.text)
                $("input[name='cover']").val(parent_json.cover)
                $("video[name='videoplay']").val(parent_json.digitFileName)
                selectedNumber(parent_json.classification, "classification")
                if ("" != parent_json.digitFileName) {
                    $("#digitFileNameSpan").text(parent_json.digitFileName);
                }
                if ("" != parent_json.cover) {
                    shared.ajaxGet("/adminJSYY/getImage", { cover: parent_json.cover, type: 'edit' }, function (result) {
                        $('#ongImg').attr('src', 'data:image/jpeg;base64,' + result);
                    });
                } else {
                    var image = "";
                    for (var i = 0; i < config.imgList.length; i++) {
                        if (parent_json.area == config.imgList[i]['key']) {
                            image = config.imgList[i]['default']
                        }
                    }
                    $('#ongImg').attr('src', image);
                }
            }
        })

        $(function () {
            $("#ongImg").click(function () {
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow($(this));
            });
        });

        //图片放大
        function imgShow(_this) {
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
            $("#bigimg").attr("src", src);//设置#bigimg元素的src属性
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/
            $("<img/>").attr("src", src).load(function () {
                var windowW = $(window).width();//获取当前窗口宽度
                var windowH = $(window).height();//获取当前窗口高度
                var imgWidth, imgHeight;
                $("#bigimg").css("width", this.width);//以最终的宽度对图片缩放
                $("#bigimg").css("height", this.height);//以最终的宽度对图片缩放
                var w = (windowW - this.width) / 2;//计算图片与窗口左边距
                var h = (windowH - this.height) / 2;//计算图片与窗口上边距
                $("#innerdiv").css({ "top": h, "left": w });//设置#innerdiv的top和left属性
                $("#outerdiv").fadeIn("fast");//淡入显示#outerdiv及.pimg
            });
            $("#outerdiv").click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            });
        }

        //下拉框默认选中
        function selectedNumber(getValue, selectNo) {
            var all = document.getElementById(selectNo); //获取select下拉框的所有值
            for (var j = 1; j < all.length; j++) {
                if (all[j].value == getValue) {
                    $(all[j]).attr("selected", "selected");
                }
            }
        }

        //渲染页面
        layui.form.render();

        //渲染日期插件
        lay('.date').each(function () {
            layui.laydate.render({
                elem: this,//元素
            });
        });

        //上传视频
        layui.upload.render({
            headers: { token: shared.getCookie('token') },
            elem: '#uploadVideo'
            , url: config.server + '/adminJSYY/fileTempUpload'
            , before: function (obj) {
                showloading(true);
            }
            , accept: 'video' //视频
            , exts: 'mp4|webm|ogv|MP4|WEBM|OGV|Mp4|Webm|Ogv' //只允许mp4,webm,ogg
            , done: function (res) {//上传后的回调
                showloading(false);
                if (res.code == 200) {
                    layer.msg('上传成功');
                    $("video[name='videoplay']").val(res.data.digitFileName)
                    if (parent.opreatType == "edit") {
                        $("input[name='newDigitFileName']").val(res.data.digitFileName)
                    } else {
                        $("input[name='digitFileName']").val(res.data.digitFileName)
                    }
                    $("#digitFileNameSpan").text(res.data.digitFileName);
                    $("#digitFileNameSpan").attr("title", res.data.digitFileName);
                } else {
                    layer.msg('上传失败,' + res.msg);
                }
            }, error: function () {//请求异常回调
                layer.msg('上传失败');
            }
        })

        //上传封面
        layui.upload.render({
            headers: { token: shared.getCookie('token') },
            elem: '#uploadCover',
            url: config.server + '/adminJSYY/imageTempUpload',
            before: function (obj) {
                obj.preview(function (index, file, result) { //预读本地文件示例，不支持ie8
                    $('#ongImg').attr('src', result);
                });
            },
            done: function (res) {//上传后的回调
                if (res.code == 200) {
                    layer.msg('上传成功');
                    if (parent.opreatType == "edit") {
                        $("input[name='newCover']").val(res.data)
                    } else {
                        $("input[name='cover']").val(res.data)
                    }
                } else {
                    layer.msg('上传失败,' + res.msg);
                }
            }, error: function () {
                layer.msg('上传失败');//请求异常回调
            }
        });

        //删除视频
        $("#deleteVideo").click(function () {
            var videoName =  $("#digitFileNameSpan").text();
            console.log(videoName,888)
            if (videoName  == '') {
                layer.msg("没有视频可删除！", { icon: 5 });
                return;
            }
            $("input[name='digitFileName']").val("")
            $("#digitFileNameSpan").text("");
            $("video[name='videoplay']").val("")
        })

        //显示loading
        function showloading(t) {
            if (t) {//如果是true则显示loading
                loading = layer.load(1, {
                    shade: [0.5, '#000'], //0.1透明度的白色背景
                    content: '<p style="position: relative;left: -50px;">资源上传中,请稍候...</p>',
                    success: function (layerContentStyle) {
                        layerContentStyle.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'text-align': 'left',
                            'line-height': '30px',
                            'color': '#333',
                            'width': '300px'
                        })
                    }
                });
            } else {//如果是false则关闭loading
                layer.closeAll('loading');
            }
        }

        function saveFile(url, dataObj, index) {
            $.ajax({
                headers: { token: shared.getCookie('token') },
                type: 'POST',
                url: config.server + url,
                contentType: 'application/json',
                dataType: "json",
                data: typeof dataObj === 'object' ? JSON.stringify(dataObj) : dataObj,
                beforeSend: function () {
                    showloading(true);
                    layer.close(index);
                },
                success: function (data) {
                    layer.closeAll();
                    showloading(false);
                    parent.tableRender(parent.tableBar, parent.collectParams())
                },
            });
        }

        //监听提交操作
        layui.form.on('submit(save)', function (data) {
            data.field.organ = $("input[name='literatureSources']").val()
            if (parent.opreatType == "add") {
                layer.confirm('确定保存当前页面吗？', function (index) {
                    saveFile('/adminJSYY/insertJSYY', data.field, index);
                });
            } else {
                layer.confirm('确定保存当前页面吗？', function (index) {
                    saveFile('/adminJSYY/updateJSYY', data.field, index);
                });
            }
            return false;
        })

        /** 设置关闭按钮的click事件处理 */
        function fn_Close() {
            layer.confirm('确定取消保存当前页面吗？', function (index) {
                layer.closeAll();
            });
        }

        //监听修改录入人
        function editRecorder() {
            layer.open({
                type: 2,
                title: "修改录入人",
                area: ['720px', '520px'],
                fixed: false, //不固定
                maxmin: true,
                offset: ['15%', '15%'],//设置位移
                cancel: function () { },
                content: 'mypages/knowledgeManagement/editRecorder.html',
                success: function (layero, index) { }
            });
        };
    </script>
</body>

</html>